.check {
    background-color: $whitish;
    border-radius: 2px;
    cursor: pointer;
    height: 1.5rem;
    overflow: hidden;
    position: relative;
    width: 65px;
    input {
        cursor: pointer;
        height: 50px;
        left: -10px;
        opacity: 0;
        position: absolute;
        top: -10px;
        width: 100px;
        z-index: 999;
        + div {
            background-color: $grey-70;
            color: $white;
            height: 25px;
            transition: all .2s linear;
            width: 50%;
        }
        ~ .check-text {
            @include font-size(small);
            @include font-type(text);
            color: $white;
            position: absolute;
            top: .2rem;
        }
        ~ .check-yes {
            opacity: 0;
            right: 0;
            text-align: center;
            width: 32px;
        }
        ~ .check-no {
            left: 0;
            opacity: 1;
            text-align: center;
            width: 33px;
        }
    }
    input:disabled,
    input:checked:disabled {
        cursor: auto;
        + div {
            background-color: $gray-lighter;
        }
        ~ .check-text {
            color: $whitish;
        }
    }
    input:checked {
        + div {
            background-color: $primary;
            color: $white;
            margin-left: 50%;
            transition: all .2s linear;
        }
        ~ .check-yes {
            opacity: 1;
        }
        ~ .check-no {
            opacity: 0;
        }
    }
}

.check-toggle {
    background-color: $grey-20;
    &.active {
        background-color: $grey-70;
    }
}
